<template>
  <teleport to="body">
    <div v-show="visible" class="vc-absolute vc-inset-0 vc-z-40">
      <div
        class="vc-dialog-mask vc-h-full vc-w-full vc-bg-black vc-bg-opacity-20 vc-relative vc-overflow-auto"
        @click="clickMask"
      >
        <div class="vc-absolute vc--translate-x-1/2 vc-left-1/2 vc-top-0 vc-py-24">
          <div class="vc-bg-white vc-rounded-md">
            <h2 v-if="title" class="vc-font-semibold vc-text-xl vc-py-2 vc-text-center vc-border-gray-300 vc-border-b">
              {{ title }}
            </h2>
            <slot />
            <div v-if="showBtn" class="vc-text-right vc-pr-4 vc-pb-4">
              <button class="vc-btn vc-btn-lg vc-btn-blue" @click="$emit('ok')">确定</button>
            </div>
          </div>
        </div>
      </div>
    </div>
  </teleport>
</template>
<script lang="ts" setup>
import { watch } from "vue";

const props = defineProps<{
  title?: string;
  visible?: boolean;
  showBtn?: boolean;
}>();
const emits = defineEmits(["update:visible", "ok"]);
watch(
  () => props.visible,
  (v) => {
    if (v) {
      document.body.classList.add("!vc-overflow-hidden");
    } else {
      document.body.classList.remove("!vc-overflow-hidden");
    }
  }
);
function clickMask(e: MouseEvent) {
  const target = e.target as HTMLElement;
  if (target.classList.contains("vc-dialog-mask")) {
    emits("update:visible", false);
  }
}
</script>
